//引入路由组件
import Home from '@/pages/Home'
import Login from '@/pages/Login'
import Register from '@/pages/Register'
import Search from '@/pages/Search'
import Detail from '@/pages/Detail'
import AddCartSuccess from '@/pages/AddCartSuccess'
import ShopCart from '@/pages/ShopCart'
import Trade from '@/pages/Trade'
import Pay from '@/pages/Pay'
import PaySuccess from '@/pages/PaySuccess'
import Center from '@/pages/Center'

// 引入二级路由
// 引入子组件
import MyOrder from '@/pages/Center/myOrder'
import GroupOrder from '@/pages/Center/groupOrder'
// 注册为center的二级路由组件

// 路由懒加载
// 当打包构建应用时，JavaScript 包会变得非常大，
// 影响页面加载。
// 如果我们能把不同路由对应的组件分割成不同的代码块，
// 然后当路由被访问的时候才加载对应组件，这样就会更加高效。
// 直接写一个箭头函数 箭头函数返回promise
// 直接component:()=>import('@/pages/Search') 
// 不用像上面一个一个引  直接用
// 路由懒加载优点  高效

//路由配置信息
export default [
  {
    path:"/center",
    component:Center,
    meta:{
      show:true
    },
    // 二级路由组件
    children:[{
      // 二级路由 没有/
     
    path:'myorder',
    component:MyOrder,
    },
    {
      path:'groupOrder',
      component:GroupOrder

    },
     // 重定向 上来直接先显示
     {
       path:'/center',
       redirect:'/center/myorder'
     }
  ]

  },
  {
    path:"/paysuccess",
    component:PaySuccess,
    meta:{
      show:true
    }
  },
  {
    path:"/pay",
    component:Pay,
    meta:{
      show:true
    },
    beforeEnter:(to,from,next)=>{
      if(from.path=='/trade'){
        next()
      }else{
        next(false)
      }
    }
  },
  {
    path:"/trade",
    component:Trade,
    meta:{
      show:true
    },
    // 路由独享守卫
    beforeEnter:(to,from,next)=>{
      // 去交易页面  必须是从购物车而来
      if(from.path=='/shopcart'){
        next();
      }else{
        // 其他的路由组件而来 停留在当前
        // 从哪里来回哪去
        next(false)
      }
    }
  },
  {
    path:"/shopcart",
    component:ShopCart,
    meta:{
      show:true
    }
  },
  {
    path:"/addcartsuccess",
    name:'addcartsuccess',
    component:AddCartSuccess,
    meta:{
      show:true
    }
  },
    {
      path:"/detail/:skuid",
      component:Detail,
      meta:{
        show:true
      }
    },
    {
      path:"/home",
      // 当用户访问home组件时候才执行 路由懒加载
      component: ()=>{
        // console.log(111); 
        return import('@/pages/Home');
      },
      meta:{
        show:true
      }
    },
    {
      path:"/search/:keyword?",
      component:()=>import('@/pages/Search'),
      meta:{
        show:true
      },
      name:'search',
      // 4.路由组件能不能传递props数据？
      //布尔值写法(params参数)
     // props:true,
     //对象写法  额外的给组件传递一些props
     //props:{a:1,b:2}
     //函数写法  可以把params参数和query参数传递给路由组件
     props:($route)=>{
       return {keyword:$route.params.keyword,k:$route.query.k};
     }


    },
    {
      path:"/register",
      component:Register,
      meta:{
        show:false
      }

    },
    {
      path:"/login",
      component:Login,
      meta:{
        show:false
      }
    },
    
    //重定向  在项目跑起来的时候 访问/ 立马让它定向到首页
    {
      path:"*",
      redirect:'/home'
    }
  ]